<script>
import icons from "./icons";
import iconUrl from "./uniicons.ttf";
const getVal = (val) => {
  const reg = /^\d*$/g;
  return typeof val === "number" || reg.test(val) ? `${val}px` : val;
};
// #ifdef APP-NVUE
const domModule = weex.requireModule("dom");
domModule.addRule("fontFace", {
  fontFamily: "uniicons",
  src: `url('${iconUrl}')`
});
// #endif

/**
 * Icons 图标
 * @description 用于展示 icons 图标
 * @tutorial https://ext.dcloud.net.cn/plugin?id=28
 * @property {Number} size 图标大小
 * @property {String} type 图标图案，参考示例
 * @property {String} color 图标颜色
 * @property {String} customPrefix 自定义图标
 * @event {Function} click 点击 Icon 触发事件
 */
export default {
  name: "UniIcons",
  props: {
    type: {
      type: String,
      default: ""
    },
    color: {
      type: String,
      default: "#CCCCCC"
    },
    size: {
      type: [Number, String],
      default: 16
    },
    customPrefix: {
      type: String,
      default: ""
    }
  },
  emits: ["click"],
  data() {
    return {
      icons: icons.glyphs
    };
  },
  computed: {
    unicode() {
      const code = this.icons.find((v) => v.font_class === this.type);
      if (code) {
        return unescape(`%u${code.unicode}`);
      }
      return "";
    },
    iconSize() {
      return getVal(this.size);
    }
  },
  methods: {
    _onClick() {
      this.$emit("click");
    }
  }
};
</script>

<template>
  <!-- #ifdef APP-NVUE -->
  <text
    :style="{ 'color': color, 'font-size': iconSize }"
    class="uni-icons"
    @click="_onClick"
  >
    {{ unicode }}
  </text>
  <!-- #endif -->
  <!-- #ifndef APP-NVUE -->
  <text
    :style="{ 'color': color, 'font-size': iconSize }"
    class="uni-icons"
    :class="[`uniui-${type}`, customPrefix, customPrefix ? type : '']"
    @click="_onClick"
  />
  <!-- #endif -->
</template>

<style lang="scss">
/* #ifndef APP-NVUE */
@import "./uniicons.css";
@font-face {
  font-family: uniicons;
  src: url("~@/static/uniicons.ttf") format("truetype");
}

/* #endif */
.uni-icons {
  font-family: uniicons;
  text-decoration: none;
  text-align: center;
}
</style>
